<!-- 图片广告 -->
<template>
	<!-- :style="{ paddingLeft: margin + 'rpx', paddingRight: margin + 'rpx' }" -->
	<view class="image-ads" :class="radiusType ? 'radius-20' : ''" style="margin: 0 auto;">
		<!-- <view>图片广告</view> -->
		<!-- 大图 -->
		<block v-if="imgList.length == 1">
			<view v-for="(item, index) in imgList" :key="index" @click="imgBtn(item)" style="margin: 0 auto 20rpx auto;width: 94%;padding-top: 20rpx;" >
				<image :src="$Utils.img(item.imageUrl)" style="width: 100%;" mode="widthFix" :lazy-load="true"></image>
			</view>
		</block>
		<!-- 轮播图 -->
		<block v-else>
			<swiper class="screen-swiper square-dot" :style="{ width: width + 'px',height: height + 'px' }"
				:indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500"
				indicator-color="#8799a3" indicator-active-color="#0081ff" :class="radiusType ? 'radius-20' : ''">
				<swiper-item v-for="(item, index) in imgListArr" :style="{ width: width + 'px',height: height + 'px' }"
					:key="index" :class="radiusType ? 'radius-20' : ''" >
					<view @click="imgBtn(item)" :class="radiusType ? 'radius-20' : ''" >
						<image :src="$Utils.img(item.imageUrl)" style="width: 100%;height: 100%;" mode=""
							:style="{ width: width + 'px',height: height + 'px' }"
							:class="radiusType ? 'radius-20' : ''" :lazy-load="true"></image>
					</view>
				</swiper-item>
			</swiper>
		</block>

	</view>
</template>

<script>
	export default {
		name: 'image-ads',
		data() {
			return {
				margin: 0,
				imgListArr:[]
			};
		},
		props: {
			imgList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			height: {
				type: [Number, String],
				default: 80
			},
			width: {
				type: [Number, String],
				default: 375
			},
			radiusType: {
				type: Boolean,
				default: false
			},
			autoplayType: {
				type: Boolean,
				default: false
			},
			site_id:{
				type: [Number, String],
				default: 0
			}
		},
		watch: {
			width: {
				handler(newName, oldName) {
					if (Number(newName) < 370) {
						this.margin = parseInt((375 - Number(newName)) / 2) * 2;
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			// 图片点击
			imgBtn(val) {
				this.$Utils.jumpCustom(val);
			},
			changeSwiper(){
				// console.log("进来")
				if(this.imgList.length>1){
					let imgList = this.imgList
					imgList.sort((a,b)=>{
						return Number(b.sort) - Number(a.sort)
					})
					this.imgListArr = imgList
					this.$forceUpdate()
				}
			},
		},
		mounted() {
			this.changeSwiper()
		}
	};
</script>

<style lang="scss">
	.image-ads {
		.screen-swiper {
			min-height: 160rpx !important;
			margin: 0 auto;
		}
	}

	.radius-20 {
		border-radius: 20rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
